﻿/*
 *  @date 滚动条
 */
define("component/scrollpanel", ["component/jdraggable"], function (require, exports, module) {
    var drag = require("./jdraggable");
    var ScrollPanel = _.Class({
        dom: null,
        $content: null,
        $scrollBar: null,
        $scrollButton: null,
        _hasScroll: false,
        _scrollStep: 50, //每次鼠标滚动带动元素滚动步长
        _scrollTop: 0,
        _maxHeight: 0,

        /**
        * @constructs
        * @param options
        * @param {HTMLElement|String|jQuery} options.container 滚动面板所在容器
        * @param {Number} [options.height=100] 高度
        * @param {HTMLElement|String|jQuery} [options.content] 面板内的内容
        * @param {String} [options.padding] 内边距，按照CSS格式书写
        */
        initial: function (options) {
            this._eventStack = {};
            this.$con = $(options.con);
            this._uiNoDefault(options);
            this._bindEvents(options);
            this.setHeight(options.height || 100);
			
            if (options.content) {
                this.setContent(options.content);
            }
            if (options.scrollBarShow) {
                this.bind("onScrollBarShow", options.scrollBarShow);
            }
            if (options.scrollBarHide) {
                this.bind("onScrollBarHide", options.scrollBarHide);
            }

        },
        _uiNoDefault: function (options) {
            var self = this,
                offset = { left: 0, top: 0 };
            this.$content = this.$con.find('[data-role="j_panel_content"]');
            this.$scrollBar = this.$con.find('[data-role="j_scroll_bar"]');
            this.$scrollButton = this.$con.find('[data-role="j_scroll_button"]');
			if (options.padding) {
                this.$content.css("padding", options.padding);
            }
        },
        _bindEvents: function (options) {
            var self = this,
                wrap = self.$content.get(0);
            this.$scrollButton.on('drag', function (evt, ui) {
                if (!ui) return;
                var pos = ui.position;
                wrap.scrollTop = pos.top / self.$content.height() * wrap.scrollHeight;
                // wrap.scrollTop = (pos.top + 2) / self.$content.height() * wrap.scrollHeight;
            });
            this.$content.mousewheel(function (evt, delta) {
                evt.preventDefault();
                evt.stopPropagation();
                if (!self._hasScroll) return;
                self.scrollTopTo(self._scrollTop - delta * self._scrollStep);
            });
        },
        scrollTopTo: function (scrollTop) {
            var self = this,
                wrap = self.$content.get(0);
            var scrollTop = Math.max(Math.min(scrollTop, wrap.scrollHeight - self.$content.height()), 0);
            if (scrollTop == self._scrollTop) return;
            self._scrollTop = scrollTop;
            self.$content.stop();
            /*self.$content.animate({ 'scrollTop' :self._scrollTop }, {
            duration  : 800,
            step : function(){
            //  self._resizeScroll();
            }
            });*/
            self.$content.scrollTop(self._scrollTop);
            self._resizeScroll();

        },
        /**
        * 设置高度
        * @param {Number} height 高度
        */
        setHeight: function (height) {
            this._maxHeight = height;
            this._resizeHeight();
            this._resizeScroll();
            this.$scrollButton.draggable({ containment: "parent"});
        },
        /**
        * 设置内容
        * @param { html
        */
        setContent: function (html) {
            this.$content.html(html);
            this.$content.get(0).scrollTop = this._scrollTop = 0;
            this._resizeHeight();
            this._resizeScroll();
        },
        appendContent: function (html) {
            this.$content.append(html);
            this._resizeHeight();
            this.scrollTopTo(20000); //滚动到最下面
        },
        clearContent: function () {
            this.setContent('');
        },
        _resizeHeight: function () {
            this.$content.css('height', '');
            var wrap = this.$content.get(0),
                contentHeight = wrap.scrollHeight,
                height = Math.min(contentHeight, this._maxHeight);
            this.$content.css('height', height);
        },
        updateScroll: function () {
            var con = this.$content.find('[data-role="contentw"]');
            var wrap = this.$content.get(0),
                contentHeight = wrap.scrollHeight,
                contentScrollTop = wrap.scrollTop,
                height = this.$content.innerHeight();

        },
        _resizeScroll: function () {
            var wrap = this.$content.get(0),
                contentHeight = wrap.scrollHeight,
                contentScrollTop = wrap.scrollTop,
                height = this.$content.innerHeight();

            if (contentHeight <= height) {
                this.$scrollBar.hide();
                this.$content.addClass("no_scroll_bar");
                this.trigger("onScrollBarHide");
                this._hasScroll = false;
            } else {
				this.$content.removeClass("no_scroll_bar");
                this.$scrollBar.show();
                this.$scrollBar.height(height);
                this.$scrollButton.height(height / contentHeight * height);
                this.$scrollButton.css('top', contentScrollTop / contentHeight * height);
                this.trigger("onScrollBarShow");
                this._hasScroll = true;
            }
        }
    });

    module.exports = ScrollPanel;
});